<template>
  <van-nav-bar title="评论" left-arrow @click-left="router.back()" fixed></van-nav-bar>
  <van-list class="comments" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
    :immediate-check="false">
    <ul class="comment-list">
      <li class="comment-item" v-for="comment in comments" :key="comment.id">
        <img :src="getProxyImageUrl(comment.uhead)" :alt="comment.uname" class="avatar" v-if="comment.uhead">
        <div class="name-content">
          <div class="name">{{ comment.uname }}</div>
          <div class="content">{{ comment.content }}</div>
          <div class="date-like-reply">
            <div class="date">{{ formatTimeAgo(comment.lastmodified) }}</div>
            <div class="like-reply">
              <span class="like"><van-icon name="good-job-o" />{{ comment.like_count }} </span>
              <span class="reply">
                <van-icon name="chat-o" />{{ comment.reply_count }}
              </span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </van-list>
</template>
<script setup>
import { getProxyImageUrl } from "@/util/index.js"
import { getAllComments } from "@/api/index.js"
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();
const loading = ref(false)
const finished = ref(false)
const comicId = computed(() => route.params.id)
const comments = ref([])
const pageNum = ref(1)
const pageSize = ref(20)
function formatTimeAgo (timestamp) {
  // 如果 timestamp 是日期字符串，转换为时间戳
  if (typeof timestamp === 'string') {
    timestamp = Date.parse(timestamp);
    if (isNaN(timestamp)) {
      console.error('Invalid date string:', timestamp);
      return '无效时间';
    }
  }
  // 当前时间
  const now = Date.now();
  // 计算时间差（以毫秒为单位）
  const diff = now - timestamp;
  console.log("diff", diff);
  // 定义时间单位（毫秒）
  const minute = 60 * 1000; // 1 分钟 = 60,000 毫秒
  const hour = 60 * minute; // 1 小时 = 3,600,000 毫秒
  const day = 24 * hour; // 1 天 = 86,400,000 毫秒
  const month = 30 * day; // 1 月 ≈ 30 天
  const year = 365 * day; // 1 年 ≈ 365 天
  if (diff < minute) {
    return '刚刚';
  } else if (diff < hour) {
    const minutes = Math.floor(diff / minute);
    return `${minutes}分钟前`;
  } else if (diff < day) {
    const hours = Math.floor(diff / hour);
    return `${hours}小时前`;
  } else if (diff < month) {
    const days = Math.floor(diff / day);
    return `${days}天前`;
  } else if (diff < year) {
    const months = Math.floor(diff / month);
    return `${months}月前`;
  } else {
    const years = Math.floor(diff / year);
    return `${years}年前`;
  }
}
onMounted(async () => {
  // 加载全部评论 第一页
  loading.value = true
  const allComments = await getAllComments(comicId.value, pageNum.value, pageSize.value)
  comments.value.push(...allComments.data)
  console.log("comments", comments.value);
  loading.value = false
});
const onLoad = async () => {
  loading.value = true
  pageNum.value += 1;
  // 加载全部评论
  const allComments = await getAllComments(comicId.value, pageNum.value, pageSize.value)
  if (allComments.data.length === 0) {
    loading.value = false
    finished.value = true
    return
  } else {
    comments.value.push(...allComments.data)
    loading.value = false
  }
};
</script>
<style scoped>
.comments {
  width: 100%;
}

.comment-list {
  list-style: none;
  margin: 46px 0 0 0;
  padding: 10px;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 0.5px solid #f0f0f0;
  padding: 10px 0;
}

.comment-item .avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.comment-item .name-content {
  font-size: 13px;
  width: 100%;
  overflow: hidden;
  /* 防止内容溢出 */
}

.name-content .name {
  margin-bottom: 10px;
}

.name-content .content {
  font-size: 14px;
  width: 100%;
  margin-bottom: 5px;
  word-break: break-all;
  /* 添加长文本换行 */
}

.date-like-reply {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.like {
  margin-right: 10px;
}
</style>
